<template>
    <div class="home">
        <!-- 3、组件调用 -->
        <Header></Header>
        <!-- 可以标签对<v-headerApp></v-headerApp>，也可以单个标签<v-headerApp /> -->
        <v-headerApp></v-headerApp>
        <Classify v-bind:classifyList="classifyList"></Classify>
        <Goods :homeList="homeList"></Goods>
        <Footer></Footer>
    </div>
</template>
   
<script>
    /**1、引入组件，后缀.vue可以省略 */
    import Header from './Header.vue'
    /* import HeaderApp from './HeaderApp.vue' 改成下一行公共组件路径*/
    import HeaderApp from '@/components/PublicApp'
    import Classify from './Classify.vue'
    import Goods from './Goods.vue'
    /* import Footer from './Footer.vue' 改成下一行公共组件路径*/
    import Footer from '@/components/PublicFooter'
    export default {
        data() {
            return {
                /**city:'',初始城市名 */
                classifyList:[],/**初始分类列表-空数组 */
                homeList:[]/**初始商家产品列表-空数组 */
            }
        },
        /**2、组件注册定义 */
        components: {
            /* 'v-header':Header 可以重命名为v-header，然后通过<v-header></v-header>调用*/
            Header,/**可以直接使用Header注册定义，等价于Header:Header，ES6规定当键值对一样时可以省略写一个 */
            'v-headerApp':HeaderApp,
            Classify,
            Goods,
            Footer
        },
        created () {
            this.$axios.get('/static/mock/home.json')
                .then((res)=>{
                    if(res.status === 200){
                        /**this.city = res.data.data.city获取接口数据并重定义城市名 */
                        this.classifyList = res.data.data.classifyList/**获取接口数据并重定义分类列表 */
                        this.homeList = res.data.data.homeList/**获取接口数据并重定义商品商家列表 */
                    }
                }).catch((error)=>{
                    console.log(error)
                })
        }
    };
</script>
   
<style scoped>

</style>





